<template>
  <!-- 
  1:创建基本的公共组件结构
  2:全局注册
   a:常规做法 main:Vue.component('组件名',导入的组件)
   b:一般是使用use做法
       Vue.use(导入的js代码,实参)
       js代码
          1:export default {
              install(Vue,形参){
               Vue.component('组件名',导入的组件)   
              }
          }
          2:export default  function (Vue,形参){
              Vue.component('组件名',导入的组件) 
          }
  3:使用测试
  4:完善组件内容与结构
  5:其它处理(传值,插槽)
     插槽:
        默认插槽
           定义  slot标签
           使用  直接写内容/template #default
        具名插槽
           定义 : <slot name="名字" />
           使用:  <template #名字/v-slot:名字>内容</template>
        作用域插槽
           默认插槽
             定义:<slot  abc="123"  ></slot>
             使用:
                 <template v-slot="scoped({abc:123})">内容</template>
           具名插槽
              定义:<slot name="xxx"  abc="123"  ></slot>
              使用:<template #xxx="scoped({abc:123})">内容</template>

 -->
  <div class="tools">
    <div>
      <div class="left" v-if="!noLeft">
        <i class="el-icon-info"></i>
        <slot name="left"></slot>
      </div>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Tools',
  props: ['noLeft']
}
</script>
<style lang="scss" scoped>
.tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .left {
    padding: 8px;
    background-color: #e6f7ff;
    border: 1px solid #94d6ff;
    .el-icon-info {
      color: #409eff;
    }
  }
}
</style>
